<template>
  <el-dialog
    v-model="dialogVisibled"
    :title="dialogTitle"
    width="500"
    :draggable="true"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="modelData"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="公司名称" prop="CorporationName">
        <el-input v-model="modelData.CorporationName"  maxlength="30" />
      </el-form-item>
      <el-form-item label="公司编码" prop="CorporationCode">
        <el-input v-model="modelData.CorporationCode"  maxlength="20" />
      </el-form-item>
      <el-form-item label="是否启用" prop="IsOpen">
        <el-switch
          v-model="modelData.IsOpen"
          class="ml-2"
          width="60"
          inline-prompt
          active-text="启用"
          inactive-text="不启用"
        />
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input v-model="modelData.Remark" type="textarea"  maxlength="200"  />
      </el-form-item>
      <div style="justify-content: right; align-items: right; display: flex">
        <el-button type="success" icon="Check" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <!-- <el-button
          type="warning"
          icon="RefreshRight"
          @click="resetForm(ruleFormRef)"
          >重置</el-button
        > -->
        <el-button type="danger" icon="Close" @click="handleClose"
          >关闭</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>
<script  lang="ts">
import {
  ref,
  reactive,
  onMounted,
  defineComponent,
  PropType,
  computed,
} from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { SysCorporation } from "@/model/corporation/corporation";
import { insert, update } from "@/api/corporation";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<SysCorporation>,
      required: true,
    },
  },

  setup(props, context) {
    const ruleFormRef = ref<FormInstance>();
    const rules = reactive<FormRules<typeof props.modelData>>({
      CorporationName: [
        {
          required: true,
          message: "请填写公司名称!",
          trigger: "blur",
        },
      ],
      CorporationCode: [
        {
          required: true,
          message: "请填写公司编码!",
          trigger: "blur",
        },
      ],
    });

    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          if (props.modelData.CorporationKey == "") {
            insert(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                handleClose();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          } else {
            update(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                handleClose();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          }
        }
      });
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });
    const handleClose = () => {
      context.emit("closeBnt");
      resetForm(ruleFormRef.value);
      //  done();
    };
    // const handleClose = (done: () => void) => {
    //   context.emit("closeBnt", "返回参数");
    //   done();
    // };

    return {
      handleClose,
      dialogVisibled,
      ruleFormRef,
      submitForm,
      rules,
      resetForm,
    };
  },
  components: {},
});
</script>

<style>
</style>